<sqx-modal-dialog (dialogClose)="emitClose()" flexBody="true" fullHeight="true" hasTabs="false" size="lg">
    <ng-container title>
        <div class="row">
            <div class="col-selector">
                @if (schemas.length > 1) {
                    <select class="form-select" [ngModel]="schema" (ngModelChange)="selectSchema($event)">
                        @for (schema of schemas; track schema) {
                            <option [ngValue]="schema">
                                {{ "contents.referencesSelectSchema" | sqxTranslate: { schema: schema.displayName } }}
                            </option>
                        }
                    </select>
                }
            </div>
        </div>

        @if (schemas.length === 1) {
            <div>{{ "contents.referencesSelectSchema" | sqxTranslate: { schema: schemas[0].displayName } }}</div>
        }

        @if (schemas.length === 0) {
            <div>{{ "contents.referencesNoSchema" | sqxTranslate }}</div>
        }
    </ng-container>
    <ng-container tabs>
        <div class="row gx-2 mt-3 mb-3">
            @if (schema) {
                <div class="col-auto">
                    <button class="btn btn-text-secondary" (click)="reload()" type="button"><i class="icon-reset"></i></button>
                </div>

                <div class="col">
                    <sqx-search-form
                        formClass="form"
                        [language]="language"
                        [languages]="languages"
                        placeholder="{{ 'contents.searchPlaceholder' | sqxTranslate }}"
                        [query]="contentsState.query | async"
                        (queryChange)="search($event)"
                        [queryModel]="queryModel | async" />
                </div>

                @if (languages.length > 1) {
                    <div class="col-auto">
                        <sqx-language-selector class="languages-buttons" [(language)]="language" [languages]="languages" />
                    </div>
                }
            }
        </div>
    </ng-container>
    <ng-container content>
        @if (schema) {
            <sqx-list-view [isLoading]="contentsState.isLoading | async" syncedHeader="true" table="true">
                <ng-container header>
                    <table class="table table-items table-fixed" #header [sqxContentListWidth]="schema.defaultReferenceFields">
                        <thead>
                            <tr>
                                <th class="cell-select">
                                    <input class="form-check" [ngModel]="selectedAll" (ngModelChange)="selectAll($event)" type="checkbox" />
                                </th>

                                <th [field]="metaFields.lastModifiedByAvatar" sqxContentListCell>
                                    <sqx-content-list-header [field]="metaFields.lastModifiedByAvatar" [language]="language" />
                                </th>

                                @for (field of schema.defaultReferenceFields; track field) {
                                    <th>
                                        <sqx-content-list-header
                                            [field]="field"
                                            [language]="language"
                                            [query]="(contentsState.query | async)!"
                                            (queryChange)="search($event)" />
                                    </th>
                                }

                                <th [field]="metaFields.statusColor" sqxContentListCell>
                                    <sqx-content-list-header [field]="metaFields.statusColor" [language]="language" />
                                </th>
                            </tr>
                        </thead>
                    </table>
                </ng-container>
                <ng-container content>
                    <div class="table-container">
                        @if (contentsState.contents | async; as contents) {
                            <table class="table table-items table-fixed" [sqxContentListWidth]="schema.defaultReferenceFields" [sqxSyncWidth]="header">
                                @for (content of contents; track content.id) {
                                    <tbody
                                        [language]="language"
                                        [languages]="languages"
                                        [schema]="schema"
                                        [selectable]="!isItemAlreadySelected(content)"
                                        [selected]="isItemSelected(content)"
                                        (selectedChange)="selectContent(content)"
                                        [sqxContentSelectorItem]="content"></tbody>
                                }
                            </table>
                        }
                    </div>
                </ng-container>
                <ng-container footer>
                    <sqx-pager (loadTotal)="reloadTotal()" [paging]="contentsState.paging | async" (pagingChange)="contentsState.page($event)" />
                </ng-container>
            </sqx-list-view>
        }
    </ng-container>
    <ng-container footer>
        <button class="btn btn-text-secondary" (click)="emitClose()" type="button">{{ "common.cancel" | sqxTranslate }}</button>
        <button class="btn btn-success" (click)="emitSelect()" [disabled]="selectionCount === 0 || selectionCount > maxItems" type="submit">
            {{ "contents.referencesLink" | sqxTranslate: { count: selectionCount } }}
        </button>
    </ng-container>
</sqx-modal-dialog>
